<template>
  <div class="editMsg">
    <p class="editMsg_a">个人资料</p>
    <div class="editMsg_b flex">
      <div class="yux">
        当前头像：
        <p>(点击头像可修改)</p>
      </div>
      <div class="b_b">
        <el-upload
          class="avatar-uploader"
          action
          :show-file-list="false"
          :http-request="uploadSectionFile"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
    </div>
    <div class="b_c2 flex">
      <span>*</span>
      <p>昵称：</p>
      <input type="text" v-model="s_name" :class="isAddn==false?'CInput':''" :disabled="isAddn" />
      <p class="editPhone" @click="editname">修改昵称</p>
    </div>
    <div class="b_c2 flex">
      <span>*</span>
      <p>绑定手机号：</p>
      <input type="text" v-model="s_phone" class="pInput" disabled/>
    </div>
    <div class="button" @click="svg()">保存</div>
  </div>
</template>

<script>
import {
  info,
  ykUseredit,
  send_message,
  updatePortrait
} from "../../api/index.js";
import axios from "axios";
export default {
  props: {},
  data() {
    return {
      userid: "",
      info: {},
      s_phone: "",
      isAddn: true,
      s_name: "",
      imageUrl: ""
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.userid = localStorage.getItem("YKuserid");
    this.post();
    this.$parent.activeItem();
  },
  watch: {},
  methods: {
    post() {
      let msg = {
        id: localStorage.getItem("YKuserid")
      };
      info(this.qs(msg))
        .then(res => {
          if (res.data.code == 0) {
            this.info = res.data.ykUser;
            this.s_phone = res.data.ykUser.phone;
            this.s_name = res.data.ykUser.username;
            this.imageUrl = res.data.ykUser.photo;
          }
        })
        .catch(e => {});
    },
    editname() {
      this.isAddn = false;
    },
    uploadSectionFile(param) {
      var fileObj = param.file;
      var from = new FormData();
      from.append("file", fileObj);
      from.append("id", this.userid);
      axios({
        url: "/api/ykUser/updatePortrait",
        method: "post",
        data: from,
        headers: { "content-type": "application/x-www-form-urlencoded" }
      }).then(res => {
        this.$message({
          type: "info",
          message: res.data.msg
        });
        if (res.data.code == 0) {
          this.imageUrl = res.data.portraitUrl;
          this.post();
          this.$parent.post();
        }
      });
    },
    svg() {
      if (this.s_name) {
        let msg = {
          id: this.userid,
          username: this.s_name
        };
        ykUseredit(this.qs(msg))
          .then(res => {
            this.$message({
              type: "info",
              message: res.data.msg
            });
            if (res.data.code == 0) {
              this.isAddn = true;
              this.post();
              this.$parent.post();
            }
          })
          .catch(e => {});
      } else {
        this.$message({
          type: "error",
          message: "请输入昵称"
        });
      }
    }
  },
  components: {}
};
</script>

<style scoped>
.editMsg {
  width: 1027px;
  height: 732px;
  background: rgba(255, 255, 255, 1);
}
.editMsg_a {
  width: 955px;
  font-size: 16px;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  margin-left: 39px;
  border-bottom: 1px solid #eee;
  padding-top: 18px;
  padding-bottom: 12px;
}
.editMsg_b > .yux {
  font-size: 14px;
  color: rgba(51, 51, 51, 1);
  margin-left: 39px;
  margin-right: 26px;
}
.b_b {
  display: flex;
  align-items: flex-end;
  margin-top: 17px;
}
.b_b > img {
  width: 130px;
  height: 130px;
}
.b_b > p {
  font-size: 14px;
  color: rgba(51, 51, 51, 1);
  margin-left: 17px;
  cursor: pointer;
}
.b_c > span,
.b_c2 > span {
  font-size: 14px;
  color: rgba(216, 20, 23, 1);
}
.b_c,
.b_c2 {
  margin-left: 39px;
  margin-top: 26px;
}
.b_c > p,
.b_c2 > p {
  font-size: 14px;
  color: #333;
  width: 124px;
}
.b_c > input,
.b_c2 > input {
  width: 200px;
  height: 37px;
  padding-left: 16px;
  font-size: 14px;
  color: rgba(51, 51, 51, 1);
  background: 0;
  border: 0;
}
.b_c > input {
  border: 1px solid rgba(214, 214, 214, 1);
}
.editPhone {
  margin-left: 33px;
  cursor: pointer;
}
.button {
  width: 50px;
  height: 30px;
  background: rgba(216, 20, 23, 1);
  border-radius: 4px;
  font-size: 14px;
  color: rgba(255, 255, 255, 1);
  line-height: 30px;
  text-align: center;
  margin-left: 134px;
  margin-top: 119px;
  cursor: pointer;
}
.b_c > button,
.b_c2 > button {
  border: 0;
  background: 0;
  font-size: 14px;
  color: rgba(216, 20, 23, 1);
}
.pInput {
  border: none;
}
.CInput {
  border: 1px solid rgba(214, 214, 214, 1) !important;
}
.avatar-uploader .el-upload {
  border: 1px dashed rgba(214, 214, 214, 1);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 130px;
  height: 130px;
  line-height: 130px;
  text-align: center;
}
.avatar {
  width: 130px;
  height: 130px;
  display: block;
}
</style>
